<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .container {
            margin: 0 auto;
            width: 750px;
            height: 500px;
            border: 1px solid red;
            position: relative;
            background-image: url(./images/1.jpg);
            background-repeat: no-repeat;
            background-size: 750px 450px;
        }
        .clip { 
            width: 50px;
            height: 50px;
            position: absolute;
            background-image: url(./images/1.jpg);
            background-repeat: no-repeat;
            background-position: -100px -0px;
            background-size: 750px 450px;
            top: 0px;
            left: 0px;
            z-index: 99;
        }
        .black {
            width: 50px;
            height: 50px;
            background-color: black;
            position: absolute;
            top: 0px;
            left: 100px;
        }
        .swiper {
            width: 50px;
            height: 50px;
            background-color: brown;
            line-height: 50px;
            text-align: center;
            position: absolute;
            top: 450px;
            border-radius: 10px;
        }
        .refresh {
            width: 50px;
            height: 50px;
            position: absolute;
            background-image: url(./images/refresh.png);
            background-size: 50px 50px;
            top: 450px;
            right: 0px;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="clip">
        </div>
        <div class="black">
        </div>
        <div class="swiper">
            滑动
        </div>
        <div class="refresh">
        </div>
    </div>
    <script>
        let imgArr = ["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"] ; 

        let blackEle = document.querySelector(".black");
        let containerEle = document.querySelector(".container");
        let swiperEle = document.querySelector(".swiper");
        let clipEle = document.querySelector(".clip");
        let refreshEle = document.querySelector(".refresh");

        resetEle ();
        function resetEle (){
            let arr = getClip(containerEle,blackEle);
            
            let str = imgArr[getRand(imgArr.length - 1 ,0)];
            console.log(str);

            containerEle.style.backgroundImage = `url(${str})` ;
            clipEle.style.backgroundImage = `url(${str})` ; 

            blackEle.style.top = arr[1] +"px"; 
            blackEle.style.left = arr[0] +"px";

            clipEle.style.top = blackEle.style.top = arr[1] +"px"; 
            clipEle.style.backgroundPosition = `-${arr[0]}px -${arr[1]}px` ; 
        }
        
        refreshEle.onclick = function (){
            resetEle ();
        }
        swiperEle.onmousedown = function (){
            let x = containerEle.offsetLeft ; 
            document.onmousemove = function (event){
                let e = event || window.event ;
                let mouseX = e.clientX ; 
                swiperEle.style.left = mouseX - x + "px" ; 
                clipEle.style.left = mouseX - x + "px" ;
            }
            document.onmouseup = function (){
                document.onmousemove = '' ;
                let ww = parseInt(blackEle.style.left) ; 
                let xx = parseInt(clipEle.style.left) ; 

                if( Math.abs( ww - xx ) <= 2 ){
                    console.log(2222222222);
                } else {
                    resetEle ();
                    swiperEle.style.left = "0px" ; 
                    clipEle.style.left = "0px" ;
                }
            }
        }


        

        function getClip(ele1,ele2){
            let w1 = parseInt(getStyle(ele1,"width"));
            let h1 = parseInt(getStyle(ele1,"height"));
            let w2 = parseInt(getStyle(ele2,"width"));
            let h2 = parseInt(getStyle(ele2,"height"));
            let ranX = getRand( w1 - w2 , w2 ) ; 
            let ranY = getRand( h1 - h2 * 2 , h2 ) ; 
            return [ranX,ranY] ; 
        }
        function getRand(max,min){
            return parseInt( Math.random() * ( max - min  + 1 ) + min ) ;
        }
        function getStyle(ele,styleName){
            if(window.getComputedStyle){
                return getComputedStyle(ele,'null')[styleName] ; 
            } else {
                return ele.currentStyle[styleName] ;
            }
        }
    </script>
</body>
</html>